<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">about</router-link> -->
    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">about</button> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">about</router-link>
    <router-link :to="'/user/'+userid">用户</router-link>
    <!-- <router-link to="/profile">档案</router-link> -->
    <router-link :to="{path:'/profile',query:{name:'jackson',age:29}}">档案</router-link>

    <button @click="userClick">用户</button>
    <Button @click="profileClick">档案</Button>
    <!-- <router-view></router-view> -->
    <keep-alive exclude="profile">
      <router-view></router-view>
    </keep-alive>
    <!-- <router-view></router-view>用来占位，根据当前路径动态渲染出不同的组件 -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userid:'lisi'
    }
  },
  methods: {
    homeClick() {
      this.$router.push('/home');
    },
    aboutClick() {
      this.$router.push('/about');
    },
    userClick(){
      this.$router.push('/user/'+this.userid);
    },
    profileClick(){
      this.$router.push({
        path:'/profile',
        query:{
          name:'jackson',
          age:29
        },
      })
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>
